<template>
  <div class="wrapper">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="申办SIMeID人数统计" name="applicant">
        <el-row style="margin-top:16px;">
          <charts :chartData="chartData" chartType="bar" ref="bar"></charts>
          <el-button-group>
            <el-button type="primary" @click="add">增加一项</el-button>
            <el-button type="danger" @click="remove">删除一项</el-button>
          </el-button-group>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="SIMeID业务办理统计" name="bussiness">
        <el-row style="margin-top:16px;margin-bottom:16px;">
          <ul>
            <li>
              <router-link to="/luyou/message">Message</router-link>
              <router-link to="/luyou/news">News</router-link>
            </li>
          </ul>
          <div>
            <router-view></router-view>
          </div>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import charts from "../../components/charts";
export default {
  components: { charts },
  props: {},
  data() {
    return {
      activeName: "applicant", // 当前选中的选项卡
      chartData: [
        ["1月份", 10],
        ["2月份", 20],
        ["3月份", 23],
        ["4月份", 63],
        ["5月份", 45]
      ],
      chartRefs: ["bar"]
    };
  },
  watch: {},
  computed: {},
  methods: {
    add() {
      if (this.chartData.length >= 12) {
        this.$message({
          message: "月份最多只有12月，不能在增加了！",
          type: "warning"
        });
        return;
      }
      var x = this.chartData.length + 1 + "月份";
      var y = Math.ceil(Math.random() * 100);
      this.chartData.push([x, y]);
      for (let index in this.chartRefs) {
        this.$refs[this.chartRefs[index]].drawChart();
      }
    },
    remove() {
      if (this.chartData.length <= 2) {
        this.$message({
          message: "至少需要两项数据才能绘图呀！",
          type: "warning"
        });
        return;
      }
      this.chartData.splice(this.chartData.length - 1, 1);
      for (let index in this.chartRefs) {
        this.$refs[this.chartRefs[index]].drawChart();
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
</style>